<template>
  <div class="app-container">
    <xr-header
      :label="typeObj.name"
      :icon-class="`wk wk-${typeObj.icon}`"
      :icon-color="typeObj.color"
      placeholder="请输入回款编号/关联对象"
      show-search
      @search="handleSearch">
      <template slot="ft">
        <el-button
          v-if="canSave"
          icon="el-icon-plus"
          type="primary"
          class="xr-btn--orange"
          @click="handleCommand('create')">
          新建回款
        </el-button>

        <el-dropdown
          v-if="moreTypes && moreTypes.length > 0"
          trigger="click"
          @command="handleCommand">
          <el-button icon="el-icon-more"/>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(item, index) in moreTypes"
              :key="index"
              :icon="item.icon | wkIconPre"
              :command="item.type">{{ item.name }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
    </xr-header>

    <div class="container">
      <list-table-header
        ref="xrTableHeader"
        :type="type"
        :selects="selectedList"
        :handles="controlBtnGroup"
        @scene="handleSceneChange"
        @command="handleCommand"
        @filter="handleFilter" />

      <el-table
        v-loading="loading"
        :data="dataList"
        :height="tableHeight"
        :cell-class-name="cellClassName"
        stripe
        border
        highlight-current-row
        style="width: 100%;"
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
        @sort-change="handleSort"
        @header-dragend="handleDragend">
        <el-table-column
          show-overflow-tooltip
          type="selection"
          align="center"
          width="55" />
        <template v-for="(item, index) in fieldList">
          <el-table-column
            v-if="!item.isHide && item.formType === 'pic'"
            :key="index"
            :label="item.name"
            :fixed="item.fixed"
            :prop="item.fieldName"
            width="112"
            header-align="left"
            align="center">
            <template slot-scope="scope">
              <template
                v-if="scope.row[scope.column.property] instanceof Array">
                <adapter-image
                  v-for="(valObj, valIndex) in scope.row[scope.column.property]"
                  :key="valIndex"
                  :src="valObj.url"
                  @click.stop="previewImage(scope, valIndex)" />
              </template>
              <template v-else>
                <adapter-image
                  :src="scope.row[scope.column.property]"
                  @click.stop="previewImage(scope, null)" />
              </template>
            </template>
          </el-table-column>
          <el-table-column
            v-else-if="!item.isHide"
            :key="index"
            :fixed="item.fixed"
            :prop="item.fieldName"
            :label="item.name"
            :width="item.width || ''"
            :min-width="100"
            :sortable="item.sortable || false"
            :formatter="item.formatter || null"
            :class-name="item.canVisit ? 'can-visit--underline' : ''"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <template v-if="item.fieldName === 'state'">
                <span
                  :style="{backgroundColor: examineColor(scope.row.state.id)}"
                  class="status-mark" />
                <span>{{ scope.row.state.name || '--' }}</span>
              </template>
              <template v-else>
                {{ item.formatter(scope.row, scope.column, scope.row[scope.column.property], scope.$index) }}
              </template>
            </template>
          </el-table-column>
        </template>
        <el-table-column v-if="dataList.length === 0" />
        <el-table-column
          :resizable="false"
          fixed="right"
          width="40">
          <template
            slot="header"
            slot-scope="slot">
            <fields-set
              :type="type"
              @change="handleRefresh"/>
          </template>
        </el-table-column>
      </el-table>

      <div class="p-contianer">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size.sync="pageSize"
          :total="total"
          :pager-count="5"
          class="p-bar"
          background
          layout="prev, pager, next, sizes, total, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </div>

    <j-x-c-all-detail
      v-if="showDetail && detailType && rowId && detailType !== 'customer'"
      :id="rowId"
      :type="detailType"
      @update="handleRefresh"
      @close="showDetail = false" />

    <!-- CRM详情页面 -->
    <c-r-m-all-detail
      :visible.sync="showDetail"
      :crm-type="detailType"
      :id="rowId"
      class="d-view"
      @handle="showDetail = false"/>

    <transfer-owner
      v-if="showTransfer"
      :type="type"
      :list="selectedList"
      @close="showTransfer = !showTransfer"
      @update="handleRefresh" />

    <create-com
      v-if="showCreate"
      :type="type"
      @update="handleRefresh"
      @close="showCreate = false" />
  </div>
</template>

<script>
import { jxcCollectionDeleteByIdsAPI } from '@/api/jxc/collection'
import CreateCom from '../../components/Create/CreateCom'
import JXCAllDetail from '../../components/JXCAllDetail'
import TransferOwner from '../../components/TransferOwner'
import CRMAllDetail from '@/views/crm/components/CRMAllDetail'

import TableMixin from '../../mixins/Table'

export default {
  name: 'ReturnedMoneyIndex',
  components: {
    CreateCom,
    JXCAllDetail,
    TransferOwner,
    CRMAllDetail
  },
  mixins: [TableMixin],
  data() {
    return {
      controlBtnGroup: [
        // { command: 'export', label: '导出选中', icon: 'export' },
        { command: 'transfer', label: '转移', icon: 'transfer' },
        { command: 'delete', label: '删除', icon: 'delete' }
      ],

      type: 'jxc_collection',

      rowId: null,
      detailType: 'jxc_collection'
    }
  },
  computed: {
    moreTypes() {
      const temps = []
      // { type: 'enter', name: '导入', icon: 'import' },
      if (this.canExport) {
        temps.push({ type: 'out', name: '导出', icon: 'export' })
      }
      return temps
    }
  },
  methods: {
    handleCommand(command) {
      switch (command) {
        case 'create':
          // 新建
          this.showCreate = !this.showCreate
          break
        case 'transfer':
          // 转移
          this.showTransfer = true
          break
        case 'delete':
          this.handleDelete()
          break
        case 'out':
          this.allExportExcel()
          break
      }
    },

    /**
     * 表格点击事件
     * @param row 被点击的行数据
     * @param field 被点击的字段
     */
    handleTableClick(row, field) {
      this.rowId = null
      this.detailType = null
      if (field === 'collectionNo') {
        this.detailType = 'jxc_collection'
        this.rowId = row.collectionNoteId
        this.showDetail = true
      } else if (field === 'relatedId' && row.relatedId) {
        this.rowId = row.relatedId.id
        if (row.collectionType === '采购退货') {
          this.detailType = 'jxc_retreat'
        } else if (row.collectionType === '销售') {
          this.detailType = 'jxc_sale'
        }
        this.showDetail = true
      } else if (field === 'collectionObject' && row.collectionObject) {
        this.rowId = row.collectionObject.id
        if (row.collectionType === '采购退货') {
          this.detailType = 'jxc_supplier'
        } else if (row.collectionType === '销售') {
          this.detailType = 'customer'
        }
        this.showDetail = true
      }
    },

    handleDelete() {
      this.$confirm(`确定要删除这些${this.typeObj.name}吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        jxcCollectionDeleteByIdsAPI({
          ids: this.selectedList.map(o => o.collectionNoteId).join(',')
        }).then(() => {
          this.$message.success('删除成功')
          this.getDataList(this.otherParams)
        }).catch(() => {})
      }).catch(() => {
        this.$message.info('已取消')
      })
    }
  }
}
</script>

<style scoped lang="scss">
  @import "../../styles/index";
</style>
